<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>TMOCC</title>
		<style>
			* {
				margin: 0;
				padding: 0;
				text-decoration: none;
				list-style: none;
			}

			.header {
				height: 71px;
				background-color: #FFFFFF;
			}

			.header-center {
				width: 1200px;
				height: 70px;
				margin: 0 auto;

			}

			.left {
				float: left;
			}

			.left img {
				margin-top: 15px;
			}

			.center {
				margin-left: 70px;
				float: left;
			}

			.center li {
				margin: auto 20px;
				float: left;

			}

			.center a {
				color: black;
				font-size: 16px;
				height: 70px;
				line-height: 70px;
			}

			.center a:hover {
				color: #4F8DFE;
			}

			.right {
				float: right;
			}

			.right li {
				float: left;
				margin: auto 10px;
			}

			.right a {
				font-size: 14px;
				color: white;
				height: 70px;
				line-height: 70px;
			}

			.right .a-fist {
				padding-right: 18px;
				border-right: white 1px solid;
			}

			.footer {
				width: 100%;
				height: 200px;
				background-color: #282c30;
			}

			.footer .xinxi {
				margin: 0 auto;
				width: 1200px;
				height: 150px;
				border-bottom: 1px solid black;
			}

			.footer .xinxi .f-xinxi {
				float: left;
				width: 700px;
				height: 200px;
			}

			.footer .xinxi .f-xinxi2 {
				float: left;
				width: 500px;
				height: 200px;

			}

			.footer .xinxi .f-xinxi ul {
				width: 500px;
				text-align: center;
				margin-left: 60px;
				margin-bottom: 20px;
			}

			.footer .xinxi .f-xinxi li {
				float: left;
				padding: 10px;
				margin-top: 50px;
				margin-bottom: 20px;
				font-size: 14px;
				border-right: 1px solid black;
				line-height: 8px;
				height: 8px;
				text-align: center;
			}

			.footer .xinxi .f-xinxi li:hover {
				cursor: pointer;
			}

			.footer .xinxi .f-xinxi li:nth-child(5) {
				border: 0;
			}

			.footer .xinxi .f-xinxi span {
				float: left;
				font-size: 14px;
				width: 700px;
			}

			.footer .xinxi .f-xinxi2 img {
				float: right;
				width: 100px;
				height: 100px;
				margin-top: 25px;
			}

			.footer .xinxi .f-xinxi2 span {
				width: 325px;
				display: block;
				font-size: 14px;
				margin-top: 60px;
				margin-left: 60px;
			}

			.footer .xinxi .f-xinxi2 p {
				font-size: 14px;
				width: 400px;
				margin-left: 5px;
				margin-top: 5px;
			}

			.guanggao {
				width: 50px;
				height: 200px;
				position: fixed;
				right: 20px;
				top: 200px;
				z-index: 1000;
			}

			.guanggao ul {
				width: 50px;
			}

			.guanggao li {
				list-style: none;
				height: 50px;
				margin: 12.5px 0;
				text-align: center;
				line-height: 50px;
				border: #dddddd 1px solid;
				background-color: #ffffff;
				border-radius: 5px 5px 5px 5px;
			}

			.guanggao img {
				width: 35px;
				height: 35px;
				margin-top: 6px;
			}

			.guanggao ul li:hover {
				background-color: gainsboro;
				cursor: pointer;
			}

			.jianbian {
				height: 25px;
				background-image: linear-gradient(#f1f1f1, #ffffff);
				/* 添加渐变 */
			}

			.nav {
				height: 400px;
				background-color: #FFFFFF;
			}

			.nav .nav-a {
				width: 1200px;
				height: 400px;
				margin: 0 auto;
			}

			.nav .nav-a1 {
				height: 40px;
			}

			.nav .nav-a1 li {
				list-style: none;
				float: left;
				height: 40px;
				margin-right: 7px;
			}

			.nav .nav-a1 li a {
				float: left;
				color: #666666;
				font-size: 14px;
				margin-top: -3px;
			}

			.nav-a .nav-b {
				margin-right: 20px;
				float: left;
				width: 640px;
				height: 360px;
			}

			.nav-a .nav-b img {
				height: 360px;
				border-radius: 5px 5px 5px 5px;

			}

			.nav-a .nav-b img:hover {
				cursor: pointer;
				filter: alpha(Opacity=80);
				-moz-opacity: 0.5;
				opacity: 0.5;
				border-radius: 5px 5px 5px 5px;
				/* 透明度 */
			}

			.nav-a .nav-c {
				float: left;
				width: 540px;
				height: 360px;
			}

			.nav .nav-a .nav-c div:nth-child(1) h3 {
				font-size: 24px;
				font-weight: 400;
				margin-bottom: 15px;
			}

			.nav .nav-a .nav-c div:nth-child(2) p {
				text-indent: 2em;
				font-size: 14px;
				color: #666666;
				height: 24.55px;
				margin-bottom: 37px;
			}

			.nav .nav-a .nav-c div:nth-child(3) span {
				font-size: 16px;
				color: #999999;
			}

			.nav .nav-a .nav-c div:nth-child(3) a {
				color: #666666;
				margin-right: 20px;
				margin-left: 10px;
			}

			.nav .nav-a .nav-c div:nth-child(4) {
				width: 540px;
				height: 40;
				margin-top: 10px;
			}

			.nav .nav-a .nav-c div:nth-child(4) h2 {
				font-size: 28px;
				font-weight: 400;
				width: 100px;
				float: left;
				color: #fd573f;
			}

			.nav .nav-a .nav-c div:nth-child(4) span {
				float: left;
				height: 14px;
				font-size: 14px;
				margin-top: 14px;
				color: #fd573f;
			}

			.nav .nav-a .nav-c div:nth-child(6) {
				background-color: #fc583d;
				width: 150px;
				height: 48px;
				margin-top: 125px;
				border-radius: 6px 6px 6px 6px;
			}

			.nav .nav-a .nav-c div:nth-child(6) a {
				color: white;
				height: 48px;
				line-height: 48px;
				text-align: center;
				display: block;
				font-size: 20px;
			}

			.nav .nav-a .nav-c div:nth-child(6):hover {
				background-color: #f74528;
				cursor: pointer;
			}

			.nav-ab {
				height: 40px;
				background-color: #ffffff;
				margin-top: 20px;
			}

			.nav-ab div:nth-child(1) {
				margin: 0 auto;
				width: 1200px;
				height: 40px;
			}

			.nav-ab div:nth-child(1) ul {
				list-style: none;
				width: 600px;
			}

			.nav-ab div:nth-child(1) li {
				float: left;
				font-size: 20px;
				margin: 0 10px;
				width: 100px;
				height: 38px;
				text-align: center;
				line-height: 38px;
			}

			.nav-ab div:nth-child(1) li:hover{
				border-bottom: #4f8dfe 2px solid;
				color: #4F8DFE;
				cursor: pointer;
			}

			.nav-ab div:nth-child(1) ul li:nth-child(1) {
				margin-left: 0;
			}

			.nav-f {
				
				background-color: #f6f5fa;
			}

			.nav-f .nav-f2 {
				width: 1200px;
				margin: 0 auto;
				background-color: #f6f5fa;
			}

			.nav-f .nav-f2>div:nth-child(1),
			.nav-f .nav-f2>div:nth-child(2){
				float: left;
				margin: 0;
				margin-top: 30px;
				width: 800px;
				background-color: #FFFFFF;
			}

			.nav-f .nav-f2 div:nth-child(3) {
				float: left;
				width: 310px;
				height:920px;
				margin-left: 50px;
				margin-top: 30px;
			}
			.nav-f .nav-f2 div:nth-child(3) div:nth-child(1) {
				float: left;
				background-color:#FFFFFF;
				width: 310px;
				height: 310px;
			}

			.nav-f .nav-f2 div:nth-child(3) div:nth-child(1) span {
				display: block;
				font-size: 18px;
				width: 200px;
				height: 40px;
				line-height: 40px;
				text-align: center;
				background-color: #4F8DFE;
				border-radius: 20px 20px 20px 20px;
				margin: 20px 55px;
				color: #FFFFFF;
			}

			.nav-f .nav-f2 div:nth-child(3) div:nth-child(1) img {
				width: 160px;
				width: 160px;
				text-align: center;
				line-height: 160px;
				margin-left: 72px;
			}

			.nav-f .nav-f2 div:nth-child(3) div:nth-child(1) h6 {
				font-size: 14px;
				width: 310px;
				text-align: center;
				font-weight: 400;
				margin: 20px 0;
			}
			.nav-f .nav-f2 div:nth-child(3) div:nth-child(2) {
				background-color:#FFFFFF;
				width: 310px;
				height: 460px;
				margin:30px 0 0 0;
			}
			.nav-f .nav-f2 div:nth-child(3) div:nth-child(2) span{
				width: 290px;
				height: 30px;
				line-height: 30px;
				margin:0 10px;
				border-bottom: 1px solid #dddddd;
				display: block;
				padding: 10px 0;
			}
			.nav-f .nav-f2 div:nth-child(3) div:nth-child(2) img{
				width: 290px;
				margin-left: 10px;
				margin-top: 38px;
			}
			.nav-f .nav-f2>div:nth-child(1) ul{
				width: 760px;
				background-color: #f6f5fa;
				margin: 20px;
				margin-top: 20px;
				list-style: none;
			}
			.nav-f .nav-f2>div:nth-child(2) ul{
				width: 760px;
				background-color: white;
				margin: 20px;
				margin-top: 20px;
				list-style: none;
			}
			.nav-f .nav-f2>div:nth-child(1) li{
				width: 760px;
				height: 60px;
				line-height: 60px;
			}
			.nav-f .nav-f2>div:nth-child(2) li{
				padding: 15px 10px;
				width: 760px;
				line-height: 20px;
			}
			.nav-f .nav-f2>div:nth-child(1) li span{
				font-weight:200;
				margin-left: 18px;
			}
			.nav-f .nav-f2>div:nth-child(1) li a{
				margin-left: 10px;
				font-size: 14px;
				font-weight: 600;
			}
			.nav-f .nav-f2 li:nth-child(2), 
			.nav-f .nav-f2 li:nth-child(3), 
			.nav-f .nav-f2 li:nth-child(5), 
			.nav-f .nav-f2 li:nth-child(6), 
			.nav-f .nav-f2 li:nth-child(7), 
			.nav-f .nav-f2 li:nth-child(8), 
			.nav-f .nav-f2 li:nth-child(9), 
			.nav-f .nav-f2 li:nth-child(10),
			.nav-f .nav-f2 li:nth-child(12),
			.nav-f .nav-f2 li:nth-child(14),
			.nav-f .nav-f2 li:nth-child(16),
			.nav-f .nav-f2 li:nth-child(18),
			.nav-f .nav-f2 li:nth-child(20){
				
				display: none;
				background-color:white;
				color: #999999;
			}
			.nav-f .nav-f2 li:nth-child(2) span,
			.nav-f .nav-f2 li:nth-child(3) span,
			.nav-f .nav-f2 li:nth-child(5) span,
			.nav-f .nav-f2 li:nth-child(6) span,
			.nav-f .nav-f2 li:nth-child(7) span,
			.nav-f .nav-f2 li:nth-child(8) span,
			.nav-f .nav-f2 li:nth-child(9) span,
			.nav-f .nav-f2 li:nth-child(10) span,
			.nav-f .nav-f2 li:nth-child(12) span,
			.nav-f .nav-f2 li:nth-child(14) span,
			.nav-f .nav-f2 li:nth-child(16) span,
			.nav-f .nav-f2 li:nth-child(18) span,
			.nav-f .nav-f2 li:nth-child(20) span{
				font-size: 14px;
			}
			.nav-f .nav-f2 li:nth-child(2) a,
			.nav-f .nav-f2 li:nth-child(3) a,
			.nav-f .nav-f2 li:nth-child(5) a,
			.nav-f .nav-f2 li:nth-child(6) a,
			.nav-f .nav-f2 li:nth-child(7) a,
			.nav-f .nav-f2 li:nth-child(8) a,
			.nav-f .nav-f2 li:nth-child(9) a,
			.nav-f .nav-f2 li:nth-child(10)a,
			.nav-f .nav-f2 li:nth-child(12)a,
			.nav-f .nav-f2 li:nth-child(14)a,
			.nav-f .nav-f2 li:nth-child(16)a,
			.nav-f .nav-f2 li:nth-child(18)a,
			.nav-f .nav-f2 li:nth-child(20)a{
				font-size: 14px;
				font-weight: 300;
			}
			.nav-f .nav-f2 li:hover{
				cursor: pointer;
			}
			.nav-a:hover{
				cursor: pointer;
			}
		</style>
	</head>
	<body>
		<div class="guanggao">
			<ul>
				<li><img src="./img/kec.png"></li>
				<li><img src="./img/线上服务.png"></li>
				<li><img src="./img/电话热线.png"></li>
			</ul>
		</div>
		<div class="header">
			<div class="header-center">
				<div class="left" onclick="window.location.href='index.html'"><a href="#"><img src="img/tmooc-logo2.png" /></a></div>
				<div class="center">
					<ul>
						<li><a href="index.html">首页</a></li>
						<li><a href="#">免费课</a></li>
						<li><a href="#">直播课</a></li>
						<li><a href="#">精品课</a></li>
						<li><a href="#">线上班 (VIP)</a></li>
						<li><a href="#">线下班</a></li>
						<li><a href="#">达内高手</a></li>
						<li><a href="#">高校专区</a></li>
					</ul>
				</div>
				<div class="right">
					<ul>
						<li><a href="" class="a-fist">注册</a></li>
						<li><a href="">登录</a></li>
					</ul>
				</div>
			</div>
		</div>
		<div class="jianbian"></div>
		<div class="nav">
			<div class="nav-a">
				<div class="nav-a1">
					<ul>
						<li><a>全部课程</a></li>
						<li onclick="window.location.href='free.html'"><a>>前端开发</a></li>
						<li><a>>3月第二周web线上体验课</a></li>
					</ul>
				</div>
				<div class="nav-b"><img src="img/18bb7bd6c71449609cf55a533adfb059.jpg" /></div>
				<div class="nav-c">
					<div>
						<h3>3月第二周web线上体验课</h3>
					</div>
					<div>
						<p>3月第二周web线上体验课</p>
					</div>
					<div><span>有效期：<a>180天</a></span><span>报名人数：<a>25人</a></span></div>
					<div>
						<h2>免费</h2><span></span>
					</div>
					<div style="clear: both;"></div>
					<div><a>立即购买</a></div>
				</div>
			</div>
		</div>
		<div class="nav-ab">
			<div>
				<ul>
					<li onclick="chuxian()">课程大纲</li>
					<li onclick="chuxian1()">课程简介</li>
					<li>留言评论</li>
				</ul>
			</div>
		</div>
		<div class="nav-f">
			<div class="nav-f2">
				<div id="aaa">
					<ul>
						<li onclick="yinc();"><span>01</span><a>3月第二周web线上体验课</a><span id="di" style=" float: right; margin-right: 40px;  transform: rotate(90deg);">></span></li>
						<li id="yincang" style="display: block; "><span>【直播】</span><a>  怦然"心"动（2021-03-08 19:00--2021-03-08 20:30）</a></li>
						<li id="yincanga" style="display: block;"><span>【点播】</span><a> 02、开发者工具介绍&代码结构（14分钟）</a></li>
						<li onclick="yinc1();"><span>02</span><a>02、小程序基础知识</a><span id="di1" style="float: right; margin-right: 40px; transform: rotate(-90deg);">></span></li>
						<li id="yincang1"><span>【点播】</span><a> 01、视图基础（6分钟）</a></li>
						<li id="yincang1a"><span>【点播】</span><a> 02、数据绑定（2分钟）</a></li>
						<li id="yincang1b"><span>【点播】</span><a> 03、视图渲染（3分钟）</a></li>
						<li id="yincang1c"><span>【点播】</span><a> 04、事件处理（2分钟）</a></li>
						<li id="yincang1d"><span>【点播】</span><a> 05、常用配置（5分钟）</a></li>
						<li id="yincang1e"><span>【点播】</span><a>06、总结-作业（1分钟）</a></li>
						<li onclick="yinc2();"><span>03</span><a>03、案例实战2-注册登录页</a><span id="di2" style="float: right; margin-right: 40px; transform: rotate(-90deg);">></span></li>
						<li id="yincang2"><span>【点播】</span><a>(01)、小程序框架</a></li>
						<li onclick="yinc3();"><span>04</span><a>04、案例实战3-个人中心</a><span id="di3" style="float: right; margin-right: 40px; transform: rotate(-90deg);">></span></li>
						<li id="yincang3"><span>【点播】</span><a>(01)、小程序框架</a></li>
						<li onclick="yinc4();"><span>05</span><a>05、案例实战4-上传旅游攻略</a><span id="di4" style="float: right; margin-right: 40px; transform: rotate(-90deg);">></span></li>
						<li id="yincang4"><span>【点播】</span><a>(01)、小程序框架</a></li>
						<li onclick="yinc5();"><span>06</span><a>06、案例实战5-录音功能</a><span id="di5" style="float: right; margin-right: 40px; transform: rotate(-90deg);">></span></li>
						<li id="yincang5"><span>【点播】</span><a>(01)、小程序框架</a></li>
						<li onclick="yinc6();"><span>07</span><a>07、案例实战6-视频弹幕功能</a><span id="di6" style="float: right; margin-right: 40px; transform: rotate(-90deg);">></span></li>
						<li id="yincang6"><span>【点播】</span><a>(01)、小程序框架</a></li>
					</ul>
				</div>
				<div style="display: none;" id="bb">
					<ul>
						<li>
							<h6 style="font-size: 16px; font-weight: 400;">课程概述</h6>
							<p style="font-size: 16px;">微信小程序已经越来越频繁地出现在我们的生活中，也以轻量级、开发快的特点成为下一步的应用趋势。本系列课程抓住了小程序开发的要点，带你快速进行知识梳理和案例实操。只需大概一周时间，即可领悟小程序实际应用流程，你也可以起步打造属于你自己的小程序。</p>
							<h6 style="font-size: 16px; font-weight: 400; margin-top:30px;">适合人群</h6>
							<p style="font-size: 16px;">对微信小程序感兴趣的同学，最好有一定前端基础</p>
						</li>

					</ul>
				</div>
							
				<div style="float: right;">
					<div>
						<span>关注微信</span>
						<img src="img/erweima.jpg" />
						<h6>扫码了解更多</h6>
					</div>
					<div>
						<span>推荐课程</span>
						<img src="./img/5530901732D54F719B185DE7F93B7E74.png" />
						<span style="border: 0;">前端交互设计(UI Design)</span>
						<span style="border: 0;padding: 0; color: #4F8DFE; font-size: 14px;">免费<a style="margin-left: 150px; color: #999999;">报名人数9,232</a></span>
						<img src="img/B6C9118E3E604AC6BDA8A8F3DB2A981B.png" />
						<span style="border: 0; font-size:14px;">一周上手小程序</span>
						<span style="border: 0;padding: 0; color: red; font-size: 14px;">￥1 (会员免费)<a style="margin-left: 100px; color: #999999;">报名人数7,517</a></span>
					</div>
				</div>
					<div style="clear: both;"></div>
			</div>
		</div>
		<div class="footer">
			<div class="xinxi">
				<div class="f-xinxi">
					<ul>
						<li>关于我们</li>
						<li>招聘信息</li>
						<li>联系我们</li>
						<li>商务合作</li>
						<li>帮助页面</li>
					</ul>
					<span>Copyright © 北京达内金桥科技有限公司版权所有 京ICP备12003709号-3 京公网安备 11010802029572号
					</span>
				</div>
				<div class="f-xinxi2">
					<img src="img/erweima.jpg">
					<span>达内在线WWW.TMOOC.CN 专注于IT职业技能培训</span>
					<p>涵盖20余门课程体系，致力于打造权威的IT职业教育学习平台</p>
				</div>
			</div>
		</div>
		<script type="text/javascript">
			var a = 1;
			var first=document.getElementById('yincang'),
				first1=document.getElementById('yincanga');
			function yinc() {
				if (a++ % 2 == 0) {
					first.style.cssText = 'display: block;';
					first1.style.cssText = 'display: block;';
					document.getElementById('di').style.cssText =
						' transition: 0.5s; float: right; margin-right: 40px; transform: rotate(90deg);'
				} else {
					first1.style.cssText = 'display: none;';
					first.style.cssText = 'display: none;';
					document.getElementById('di').style.cssText =
						'transition: 0.5s; float: right; margin-right: 40px; transform: rotate(-90deg);'
				}
			}
			var b = 1;

			function yinc1() {
				if (b++ % 2 == 1) {
					document.getElementById('yincang1').style.cssText = 'display: block;';
					document.getElementById('yincang1a').style.cssText = 'display: block;';
					document.getElementById('yincang1b').style.cssText = 'display: block;';
					document.getElementById('yincang1c').style.cssText = 'display: block;';
					document.getElementById('yincang1d').style.cssText = 'display: block;';
					document.getElementById('yincang1e').style.cssText = 'display: block;';
					document.getElementById('di1').style.cssText =
						' transition: 0.5s; float: right; margin-right: 40px; transform: rotate(90deg);'
				} else {
					document.getElementById('yincang1').style.cssText = 'display: none;';
					document.getElementById('yincang1a').style.cssText = 'display: none;';
					document.getElementById('yincang1b').style.cssText = 'display: none;';
					document.getElementById('yincang1c').style.cssText = 'display: none;';
					document.getElementById('yincang1d').style.cssText = 'display: none;';
					document.getElementById('yincang1e').style.cssText = 'display: none;';
					document.getElementById('di1').style.cssText =
						'transition: 0.5s; float: right; margin-right: 40px; transform: rotate(-90deg);'
				}
			}
			var c = 1;

			function yinc2() {
				if (c++ % 2 == 1) {
					document.getElementById('yincang2').style.cssText = 'display: block;';
					document.getElementById('di2').style.cssText =
						' transition: 0.5s; float: right; margin-right: 40px; transform: rotate(90deg);'
				} else {
					document.getElementById('yincang2').style.cssText = 'display: none;';
					document.getElementById('di2').style.cssText =
						'transition: 0.5s; float: right; margin-right: 40px; transform: rotate(-90deg);'
				}
			}
			var d = 1;

			function yinc3() {
				if (d++ % 2 == 1) {
					document.getElementById('yincang3').style.cssText = 'display: block;';
					document.getElementById('di3').style.cssText =
						' transition: 0.5s; float: right; margin-right: 40px; transform: rotate(90deg);'
				} else {
					document.getElementById('yincang3').style.cssText = 'display: none;';
					document.getElementById('di3').style.cssText =
						'transition: 0.5s; float: right; margin-right: 40px; transform: rotate(-90deg);'
				}
			}
			var e = 1;

			function yinc4() {
				if (e++ % 2 == 1) {
					document.getElementById('yincang4').style.cssText = 'display: block;';
					document.getElementById('di4').style.cssText =
						' transition: 0.5s; float: right; margin-right: 40px; transform: rotate(90deg);'
				} else {
					document.getElementById('yincang4').style.cssText = 'display: none;';
					document.getElementById('di4').style.cssText =
						'transition: 0.5s; float: right; margin-right: 40px; transform: rotate(-90deg);'
				}
			}
			var f = 1;

			function yinc5() {
				if (f++ % 2 == 1) {
					document.getElementById('yincang5').style.cssText = 'display: block;';
					document.getElementById('di5').style.cssText =
						' transition: 0.5s; float: right; margin-right: 40px; transform: rotate(90deg);'
				} else {
					document.getElementById('yincang5').style.cssText = 'display: none;';
					document.getElementById('di5').style.cssText =
						'transition: 0.5s; float: right; margin-right: 40px; transform: rotate(-90deg);'
				}
			}
			var g = 1;

			function yinc6() {
				if (g++ % 2 == 1) {
					document.getElementById('yincang6').style.cssText = 'display: block;';
					document.getElementById('di6').style.cssText =
						' transition: 0.5s; float: right; margin-right: 40px; transform: rotate(90deg);'
				} else {
					document.getElementById('yincang6').style.cssText = 'display: none;';
					document.getElementById('di6').style.cssText =
						'transition: 0.5s; float: right; margin-right: 40px; transform: rotate(-90deg);'
				}
			}

			function chuxian() {
				document.getElementById('aaa').style.cssText = 'display: block;'
				document.getElementById('bb').style.cssText = 'display: none;'
			}

			function chuxian1() {
				document.getElementById('bb').style.cssText = 'display: block;'
				document.getElementById('aaa').style.cssText = 'display: none;'
			}
		</script>
	</body>
</html>
